<template>
  <div>
    <div>
      <el-form
        ref="ruleFormRef"
        style="max-width: 100%"
        :model="data"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-row>
          <el-col :span="8">
            <div class="grid-content ep-bg-purple">
              <el-form-item label="名称： " prop="name">
                <el-input
                  style="width: 160px"
                  v-model="data.name"
                  placeholder="会员名称"
                />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content ep-bg-purple-light">
              <label>等级： </label>
              <el-input-number v-model="data.level" :min="1" :max="100" />
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content ep-bg-purple-light">
              <label>折扣： </label>
              <el-input-number
                v-model="data.foever"
                :precision="2"
                :step="0.1"
                :max="10"
              />
            </div>
          </el-col>
          <el-col style="margin-top: 8px" :span="24">
            <div class="grid-content ep-bg-purple-light">
              <el-form-item
                style="margin-left: -11px"
                label="描述:"
                prop="description"
              >
                <el-input
                  class="descs"
                  v-model="data.description"
                  type="textarea"
                />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="ep-btn-group">
      <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      <el-button type="primary" @click="addVip(ruleFormRef)">保存</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, defineEmits, ref } from "vue";
import { VipsAdd } from "@/api/Vip/vips";
import { toast } from "@/tools/tools";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";

const formSize = ref<ComponentSize>("default");
const ruleFormRef = ref<FormInstance>();

interface RuleForm {
  name: string;
  level: number;
  foever: number;
  description: string;
}
const data = reactive<RuleForm>({
  name: "",
  level: 1,
  foever: 1,
  description: "",
});

const addVip = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const res = await VipsAdd(data);
      if (res.code >= 0) {
        toast.success(res.message);
        setTimeout(() => {
          resetForm(formEl);
          emit("update:visible", false); // 保存成功后关闭对话框
        }, 1000);
      } else {
        toast.error(res.message);
      }
    }
  });
};
//添加会员
const emit = defineEmits(["update:visible"]);
const addVp = async () => {
  const res = await VipsAdd(data);
  if (res.code >= 0) {
    toast.success(res.message);
    setTimeout(() => {
      emit("update:visible", false); // 保存成功后关闭对话框
    }, 1000);
  } else {
    toast.error(res.message);
  }
};

//输入框ules
const rules = reactive<FormRules<RuleForm>>({
  name: [{ required: true, message: "请输入名称", trigger: "blur" }],

  description: [{ required: true, message: "请输入描述", trigger: "blur" }],
});

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.ep-btn-group {
  margin-top: 30px;
  text-align: right;
  margin-right: 30px;
  margin-bottom: 10px;
}

.descs {
  height: 50px;
  width: 620px;
  margin-left: 8px;
  margin-top: 8px;
}
</style>
